<!--
 * @description:
 * @author: huangpeng
 * @date: 2023年07月16日 22:58
 * @Copyright:  2022-2023
!-->
<template>
  <div class="main-anchor">
    <el-tabs v-model="activeTab" @tab-click="handleTabClick">
      <el-tab-pane name="recommend">
        <span slot="label">
          <i class="el-icon-collection-tag"/>推荐
        </span>
      </el-tab-pane>
      <el-tab-pane name="last">
        <span slot="label">
          <i class="el-icon-s-promotion"/>最新
        </span>
      </el-tab-pane>
      <el-tab-pane name="hot">
        <span slot="label">
          <i class="el-icon-sunny"/>最热
        </span>
      </el-tab-pane>
      <el-tab-pane name="random">
        <span slot="label">
          <i class="el-icon-news"/>随机
        </span>
      </el-tab-pane>
      <el-tab-pane name="essay">
        <span slot="label">
          <i class="el-icon-hot-water"/>生活随笔
        </span>
      </el-tab-pane>
      <el-tab-pane name="doc">
        <span slot="label">
          <i class="el-icon-document"/>柠檬文档
        </span>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";

@Component({})
export default class index extends Vue {

  /** 当前tab */
  private activeTab: string = 'recommend';

  private create() {

  }

  /** 店家tab */
  private handleTabClick(item: string) {
    this.$emit('handleTabClick', this.activeTab)
  }

}
</script>
<style scoped lang="scss">
.main-anchor {
  height: 40px;
  line-height: 40px;
  width: 100%;
  margin-top: 20px;
  ::v-deep .el-tabs__item {
    font-size: 16px;
  }
}
</style>
